<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Tokenizer - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        #example1 {
            display: flex;
            align-items: flex-start;
            position: relative;
            background: #3e372d;
            padding: 50px;
            justify-content: center;
            overflow: hidden;
            font-size: 32px;
        }
        #example1 .char {
            display: inline-block;
            position: relative;
        }
        #example1 .te-odd {
            color: orange;
        }
        #example1 .te-even {
            color: orangered;
        }
        #example1 .ts-4, #example1 .ts-e {
            color: white;
        }
        #example1 .ts-o {
            color: greenyellow;
        }
        #example1 .ts-s {
            color: deepskyblue;
        }
        #example1 .ts-a {
            color: #ffe34a;
        }
        #example1 .ts-M, #example1 .ts-m {
            color: cyan;
        }

        #example2 {
            font-size: 38px;
            font-weight: bold;
            color: #ffffff;
            display: flex;
            justify-content: center;
            padding: 50px;
            background: #3e372d;
            position: relative;
        }
        #example2 .char {
            font-weight: bold;
            display: inline-block;
            width: 48px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            text-transform: uppercase;
            z-index: 2;
            opacity: .8;
        }
        #example2 .char.te-odd {
            background: orangered;
            transform: skewY(-20deg);
        }
        #example2 .char:not(.space).te-even {
            background: orange;
            transform: skewY(20deg);
        }

        #example3 {
            display: flex;
            align-items: flex-start;
            position: relative;
            background: #3e372d;
            padding: 50px;
            justify-content: center;
            overflow: hidden;
        }
        #example3 .char {
            display: inline-block;
            background: #ffffff;
            color: #282828;
            border-bottom: 4px coral solid;
            font-size: 48px;
            padding: 10px 8px 0;
            text-align: center;
            box-shadow: 2px 2px 4px #000;
            text-transform: uppercase;
            font-weight: bold;
            margin: 0 4px;
            position: relative;
            width: 64px;
            height: 80px;
            transform-origin: 50% 6px;
        }
        #example3 .char::before {
            content: "";
            position: absolute;
            z-index: 2;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #39342e;
            left: 50%;
            top: 6px;
            margin-left: -4px;
        }
        #example3 .char.te-odd {
            margin-top: 3px;
        }
        #example3 .char.te-even {
        }
        #example3 .ts-M {
            animation: skew 2s linear infinite;
        }
        #example3 .ts-e {
            animation: skew-reverse 2.2s linear infinite;
        }
        #example3 .ts-t {
            animation: skew 3s linear infinite;
        }
        #example3 .ts-r {
            animation: skew-reverse 2.8s linear infinite;
        }
        #example3 .ts-o {
            animation: skew-reverse 3.2s linear infinite;
        }
        #example3 .ts-4 {
            animation: skew 1.9s linear infinite;
        }
        @keyframes skew {
            0% {
                transform: skew(-10deg, 10deg)
            }
            25% {
                transform: skew(0deg, 0deg)
            }
            50% {
                transform: skew(8deg, -8deg);
            }
            75% {
                transform: skew(0deg, 0deg);
            }
            100% {
                transform: skew(-10deg, 10deg)
            }
        }
        @keyframes skew-reverse {
            0% {
                transform: skew(8deg, -8deg)
            }
            25% {
                transform: skew(0deg, 0deg)
            }
            50% {
                transform: skew(-10deg, 10deg);
            }
            75% {
                transform: skew(0deg, 0deg);
            }
            100% {
                transform: skew(8deg, -8deg)
            }
        }
        #example4 .word:not(:nth-child(1)) {
            margin-left: 4px;
        }
        #example4 .char:not(:nth-child(1)) {
            margin-left: -4px;
        }
    </style>
</head>
<body class="m4-cloak">
    <div class="container">
        <br>
        <h1 class="text-center">Tokenizer test page</h1>
        <br>
        <div id="example1" data-cls-token="char" data-space-symbol="&nbsp;" data-on-token-create="drawToken"></div>
        <br>
        <br>
        <div id="example2" data-cls-token="char" data-role="tokenizer">
            Metro UI
        </div>
        <br>
        <br>
        <div id="example3" data-role="tokenizer" data-cls-token="char">
            Metro UI
        </div>
        <br>
        <br>

        <div id="example4">
            Metro4 is Awesome!
        </div>
    </div>

<script src="../lib/metro.js"></script>
<script>
    $.animation.duration = 1000;
    $.animation.ease = "easeOutBounce";

    function drawToken(token){
        $(token).css({
            top: -100
        });

        setTimeout(function(){
            $.chain([
                {
                    el: token,
                    draw: {
                        top: 0
                    }
                },
                {
                    el: token,
                    draw: {
                        top: 120
                    },
                    defer: 2000
                }
            ])
        }, $.random(300, 1000))
    }

    function a(){
        setTimeout(function(){
            $('#example1').tokenizer({
                textToTokenize: "Build impressive web site with a Metro UI!"
            });
            b();
        }, 5000)
    }

    function b(){
        setTimeout(function(){
            $('#example1').tokenizer({
                textToTokenize: "Metro UI is awesome!"
            });
            a();
        }, 5000)
    }

    $(function(){
        $('#example1').tokenizer({
            textToTokenize: "Metro UI is awesome!",
            onTokenizerCreate: function(){
                a();
            }
        });

        $('#example4').tokenizer({
            splitter: ' ',
            clsToken: "word",
            tokenElement: "div"
        }).children().tokenizer({
            clsToken: "char",
            append: "&nbsp;"
        });
    })
</script>
</body>
</html>
